<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <script type="text/javascript" src="./jquery-3.1.1.js"></script>
  <script type="text/javascript">
    $(function(){
     $('.box').hover(function() {
       $('.oo').animate({height:"200px"});
     }, function() {
       /* Stuff to do when the mouse leaves the element */
     });

    })
  </script>
  <title></title>
  <style type="text/css">

    .box{
      width: 400px;
      height: 400px;
      background-color: pink;
      position: relative;
    }
    .oo{
      width: 200px;
      height: 0px;
      background-color: blue;
      position: absolute;
      /*top:300px;*/
      bottom: 0px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="oo"></div>
  </div>
</body>
</html>



 